<template>
	<header class="mint-header is-fixed" style="background: linear-gradient(to right, #fd996d, #ff5c5c);">
		<div style="position:relative;width:100%;height:.88rem;line-height:.88rem;">
			<div class="mint-header-button is-left" @click="back">
				<button class="mint-button mint-button--default mint-button--normal">
					<span class="mint-button-icon">
						<i class="mintui mintui-back"></i>
					</span>
					<label class="mint-button-text"></label>
				</button>
			</div>

			<div style="position:absolute;left:0;right:0;height:0;">
				<div class="interaction-head-title" @click="selectHeader($event)">
					<a class="first-a" :class=" isPublish ? 'aClass' : ''" id="publish">我发布的</a>
					<a class="second-a" style="margin-left:-.1rem;" :class=" isPublish ? '' : 'aClass'" id="participation">我参与的</a>
				</div>
			</div>
		</div>

	</header>
</template>
<script>
	import {mapState, mapMutations} from 'vuex'
	export default{
		data () {
			return {
				isPublish:true,
				msg : "我的互动头部"
			}
		},
		computed:{
	      ...mapState([
	        'isMyPublishStatue'
	      ])
	    },
		methods : {
			back () {
				this.$router.go(-1) ;
			} ,
			selectHeader (event) {
				if("A" === event.target.nodeName && "participation" === event.target.id){
					this.isPublish = false ;
					this.$emit("isPublish" , false) ;
				}else if("A" === event.target.nodeName && "publish" === event.target.id){
					this.isPublish = true ;
					this.$emit("isPublish" , true) ;
				}
			}
		},
		mounted () {
			this.isPublish = this.isMyPublishStatue ;
		},
	    components: {

	    }
	}
</script>
<style scoped>
	.interaction-header .mint-header-button{
		margin-left:.3rem;
		float:left;
	}
	.interaction-head-title{
		width:calc(~'3.41rem - -3px');
		height:0;
		font-family:'PingFangSC Medium';
		font-size:.3rem;
		color:#A0C0D8;
		z-index:1;
		margin:0 auto;
	}
	.interaction-head-title > a{
		height:.5rem;
		line-height:.5rem;
		display:inline-block;
		font-weight:100;
		font-size:.3rem;
		width:1.705rem;
		color:#fff;
		border:1px solid #fff;

	}
	.interaction-head-title > a:visited{
		background-color:#fff;
		color:rgb(160, 192, 216);
	}
	.aClass{
		background-color:#fff;
		color: #fd986d !important;
	}
	.first-a{
		border-top-left-radius:.05rem;
		border-bottom-left-radius:.05rem;
	}
	.second-a{
		border-top-right-radius:.05rem;
		border-bottom-right-radius:.05rem;
	}
</style>
